<template>
  <div class="paging">
    <button class="action" :disabled="current === 1" @click="toPage(1)">首页</button>
    <button class="action" :disabled="current === 1" @click="toPage(current - 1)">上一页</button>
    <view class="prompt">第 {{ current }} 页</view>
    <button class="action" :disabled="next === 0" @click="toPage(current + 1)">下一页</button>
    <view class="prompt" v-if="current > 1 && next === 0">已到末页</view>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
defineProps({
  current: {
    type: Number,
    default: 1
  },
  next: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['toPage'])
const toPage = (page: number) => {
  if (page > 20) {
    ElMessage.warning('无法查看更多数据，请修改搜索条件！')
    return
  }
  emits('toPage', page)
}
</script>
<style lang="scss">
.paging {
  display: flex;
  padding: 16px;
  justify-content: flex-end;
  align-items: center;
  .action {
    background: #f5f5f5;
    border: solid 1px #edeedd;
    border-radius: 2px;
    padding: 4px 11px;
    font-size: 12px;
    margin-left: 16px;
    cursor: pointer;
  }
  .prompt {
    font-size: 11px;
    margin-left: 12px;
    color: #555555;
  }
}
</style>
